<template>
  <el-dialog :title="'选择人员'"
             :fullscreen="true"
             :visible="open"
             :close-on-click-modal="false"
             class="dialog_collect"
             @open="handleOpenDialog"
             @close="handleCloseDialog">
    <section class="dialog_body">
      <common-map
        ref="map"
        style="height: calc(100vh - 110px)"
        :end-drag-box-handler="endDragBoxHandler"
        :isTool="isTool"
        :toolbarSelectVisible="isTool"
      >
      </common-map>
    </section>
    <section slot="footer" class="dialog-footer">
      <el-button @click="handleCloseDialog">关 闭</el-button>
    </section>
    <tabsBoatAndUser :runUserList="runUserList"
                     :runBoatList="runBoatList"
                     @closeDialog="closedOperation"
                     :open="isShowTabs"
                     :eventId="eventId"
                     :isEvent="true"
                     :x="x"
                     :y="y"
                     @getUserId="getUserId"
    ></tabsBoatAndUser>
  </el-dialog>
</template>

<script>
  import tabsBoatAndUser from '@/views/onemap/List/tabsBoatAndUser'

  export default {
    name: 'examineMap',
    components: {
      tabsBoatAndUser
    },
    props: {
      open: {
        type: Boolean,
        default: false
      },
      objectForm: {
        type: Object,
        default: {}
      },
      isTool: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        map: null,
        endDragBoxHandler: (extent, features) => {
          this.endMapSelect(extent, features)
        },
        queryParams1: {
          pageNum: 1,
          pageSize: 99999,
          shipType: '2',
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0
        },
        queryParams3: {
          pageNum: 1,
          pageSize: 99999,
          shipType: '2',
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0
        },
        isShowTabs: false,
        runBoatList: {},
        runUserList: {},
        eventId: 0,
        x: 0,
        y: 0
      }
    },
    watch: {
      objectForm: {
        handler(val) {
          this.eventId = this.objectForm.eventId
        }
      }
    },
    methods: {
      handleOpenDialog() {
        this.$nextTick(() => {
          this.map = this.$refs.map.map
          this.intMap()
        })
      },
      handleCloseDialog() {
        this.rest()
        this.$emit('closedMap')
      },
      intMap() {
        this.markers = []
        this.markers.push({
          coordinates: this.objectForm.point,
          id: this.objectForm.eventId,
          title: '案件',
          target: 'event',
          animate: true,
          stopEvent: true,
          iconUrl: '/image/map/case-orange.png'
        })
        this.$refs.map.showMarkerFeature(this.markers, false, 'event')
        this.$refs.map.map.getMap().getView().animate({
          center: this.objectForm.point,
          duration: 500
        })
      },
      rest() {
        this.queryParams1 = {
          pageNum: 1,
          pageSize: 99999,
          shipType: '2',
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0
        }
        this.queryParams3 = {
          pageNum: 1,
          pageSize: 99999,
          shipType: '2',
          maxX: 0,
          maxY: 0,
          minX: 0,
          minY: 0
        }
        this.eventId = 0
        this.runUserList = {}
        this.runBoatList = {}
      },
      endMapSelect(extent) {
        console.log('框选回调=====>', extent)
        this.queryParams1.minX = extent[0]
        this.queryParams1.minY = extent[1]
        this.queryParams1.maxX = extent[2]
        this.queryParams1.maxY = extent[3]
        this.queryParams3.minX = extent[0]
        this.queryParams3.minY = extent[1]
        this.queryParams3.maxX = extent[2]
        this.queryParams3.maxY = extent[3]
        this.runUserList = this.queryParams1
        this.runBoatList = this.queryParams3
        this.opendOperation('tabs')
      },
      opendOperation() {
        this.isShowTabs = true
      },
      closedOperation() {
        this.isShowTabs = false
      },
      getUserId(e) {
        this.isShowTabs = false
        this.$emit('getUserId', e)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .dialog_collect {
    ::v-deep .el-dialog__body {
      padding: 0;
    }

    ::v-deep .el-tabs__header {
      padding: 0 20px;
    }

    ::v-deep .el-dialog__header {
      padding: 10px 20px 10px;
      background-color: #f2f2f2;

      .el-dialog__headerbtn {
        top: 12px;
      }
    }

    ::v-deep .el-dialog__footer {
      text-align: center;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      padding: 15px;
      background: #f1f1f1;
    }
  }
</style>
